<ons-page>
    <ons-toolbar>
        <div class="left">
            <ons-back-button>返回</ons-back-button>
        </div>
        <div class="center">Segment 分段控件</div>
    </ons-toolbar>

    <div style="padding: 20px;">
        <h3>Segment 分段控件</h3>
        <p style="color: #666; line-height: 1.6;">
            分段控件用于在多个选项之间切换，常用于视图切换和分类筛选。
        </p>

        <h3 style="margin-top: 30px;">基础分段控件</h3>
        <div class="code-example-container">
            <div class="code-demo-area">
                <div style="margin: 10px 0;">
                    <ons-segment style="width: 100%;" id="segment1">
                        <button onclick="segmentChanged('segment1', 0)">选项 1</button>
                        <button onclick="segmentChanged('segment1', 1)">选项 2</button>
                        <button onclick="segmentChanged('segment1', 2)">选项 3</button>
                    </ons-segment>
                </div>
                <p style="margin-top: 10px; color: #666; text-align: center;" id="segment1Text">
                    当前选择: 选项 1
                </p>
            </div>
            <div class="code-actions" onclick="toggleCode('basic-segment-code')">
                <div class="code-actions-left">
                    <ons-icon id="icon-basic-segment-code" icon="md-chevron-down"></ons-icon>
                    <span>查看代码</span>
                </div>
                <div class="code-actions-right">
                    <button class="code-action-btn" id="copy-btn-basic-segment-code" onclick="event.stopPropagation(); copyCode('basic-segment-code')">
                        <ons-icon icon="md-copy"></ons-icon>
                        <span class="btn-text">复制</span>
                    </button>
                </div>
            </div>
            <div class="code-display" id="code-basic-segment-code">
                <pre><code id="code-content-basic-segment-code">&lt;!-- HTML --&gt;
&lt;ons-segment style="width: 100%;" id="segment1"&gt;
    &lt;button onclick="segmentChanged('segment1', 0)"&gt;选项 1&lt;/button&gt;
    &lt;button onclick="segmentChanged('segment1', 1)"&gt;选项 2&lt;/button&gt;
    &lt;button onclick="segmentChanged('segment1', 2)"&gt;选项 3&lt;/button&gt;
&lt;/ons-segment&gt;

&lt;!-- JavaScript --&gt;
&lt;script&gt;
function segmentChanged(segmentId, index) {
    var options = ['选项 1', '选项 2', '选项 3'];
    var textElement = document.getElementById(segmentId + 'Text');
    if (textElement) {
        textElement.textContent = '当前选择: ' + options[index];
    }
    
    // 更新按钮状态
    var segment = document.getElementById(segmentId);
    var buttons = segment.querySelectorAll('button');
    buttons.forEach(function(btn, i) {
        if (i === index) {
            btn.classList.add('active');
        } else {
            btn.classList.remove('active');
        }
    });
}
&lt;/script&gt;</code></pre>
            </div>
        </div>

        <h3 style="margin-top: 30px;">两个选项</h3>
        <div class="code-example-container">
            <div class="code-demo-area">
                <div style="margin: 10px 0;">
                    <ons-segment style="width: 100%;" id="segment2">
                        <button onclick="segmentChanged('segment2', 0)">列表</button>
                        <button onclick="segmentChanged('segment2', 1)">网格</button>
                    </ons-segment>
                </div>
            </div>
            <div class="code-actions" onclick="toggleCode('two-options-code')">
                <div class="code-actions-left">
                    <ons-icon id="icon-two-options-code" icon="md-chevron-down"></ons-icon>
                    <span>查看代码</span>
                </div>
                <div class="code-actions-right">
                    <button class="code-action-btn" id="copy-btn-two-options-code" onclick="event.stopPropagation(); copyCode('two-options-code')">
                        <ons-icon icon="md-copy"></ons-icon>
                        <span class="btn-text">复制</span>
                    </button>
                </div>
            </div>
            <div class="code-display" id="code-two-options-code">
                <pre><code id="code-content-two-options-code">&lt;!-- HTML --&gt;
&lt;ons-segment style="width: 100%;"&gt;
    &lt;button&gt;列表&lt;/button&gt;
    &lt;button&gt;网格&lt;/button&gt;
&lt;/ons-segment&gt;</code></pre>
            </div>
        </div>

        <h3 style="margin-top: 30px;">内容切换示例</h3>
        <div class="code-example-container">
            <div class="code-demo-area">
                <div style="margin: 10px 0;">
                    <ons-segment style="width: 100%;" id="contentSegment">
                        <button onclick="showContent(0)" class="active">推荐</button>
                        <button onclick="showContent(1)">热门</button>
                        <button onclick="showContent(2)">最新</button>
                    </ons-segment>
                </div>

                <ons-card style="margin-top: 15px; min-height: 200px;">
                    <div class="content" id="content0">
                <h4>推荐内容</h4>
                <ons-list>
                    <ons-list-item>
                        <div class="center">
                            <span class="list-item__title">推荐文章 1</span>
                            <span class="list-item__subtitle">这是推荐的内容</span>
                        </div>
                    </ons-list-item>
                    <ons-list-item>
                        <div class="center">
                            <span class="list-item__title">推荐文章 2</span>
                            <span class="list-item__subtitle">这是推荐的内容</span>
                        </div>
                    </ons-list-item>
                </ons-list>
            </div>
            <div class="content" id="content1" style="display: none;">
                <h4>热门内容</h4>
                <ons-list>
                    <ons-list-item>
                        <div class="center">
                            <span class="list-item__title">热门文章 1</span>
                            <span class="list-item__subtitle">浏览量: 10000+</span>
                        </div>
                        <div class="right">
                            <ons-icon icon="md-local-fire-department" style="color: #ff6b6b;"></ons-icon>
                        </div>
                    </ons-list-item>
                    <ons-list-item>
                        <div class="center">
                            <span class="list-item__title">热门文章 2</span>
                            <span class="list-item__subtitle">浏览量: 8000+</span>
                        </div>
                        <div class="right">
                            <ons-icon icon="md-local-fire-department" style="color: #ff6b6b;"></ons-icon>
                        </div>
                    </ons-list-item>
                </ons-list>
            </div>
            <div class="content" id="content2" style="display: none;">
                <h4>最新内容</h4>
                <ons-list>
                    <ons-list-item>
                        <div class="center">
                            <span class="list-item__title">最新文章 1</span>
                            <span class="list-item__subtitle">刚刚发布</span>
                        </div>
                        <div class="right">
                            <ons-icon icon="md-fiber-new" style="color: #4a90e2;"></ons-icon>
                        </div>
                    </ons-list-item>
                    <ons-list-item>
                        <div class="center">
                            <span class="list-item__title">最新文章 2</span>
                            <span class="list-item__subtitle">5分钟前</span>
                        </div>
                        <div class="right">
                            <ons-icon icon="md-fiber-new" style="color: #4a90e2;"></ons-icon>
                        </div>
                    </ons-list-item>
                </ons-list>
            </div>
        </ons-card>
            </div>
            <div class="code-actions" onclick="toggleCode('content-switch-code')">
                <div class="code-actions-left">
                    <ons-icon id="icon-content-switch-code" icon="md-chevron-down"></ons-icon>
                    <span>查看代码</span>
                </div>
                <div class="code-actions-right">
                    <button class="code-action-btn" id="copy-btn-content-switch-code" onclick="event.stopPropagation(); copyCode('content-switch-code')">
                        <ons-icon icon="md-copy"></ons-icon>
                        <span class="btn-text">复制</span>
                    </button>
                </div>
            </div>
            <div class="code-display" id="code-content-switch-code">
                <pre><code id="code-content-content-switch-code">&lt;!-- HTML --&gt;
&lt;ons-segment id="contentSegment"&gt;
    &lt;button onclick="showContent(0)" class="active"&gt;推荐&lt;/button&gt;
    &lt;button onclick="showContent(1)"&gt;热门&lt;/button&gt;
    &lt;button onclick="showContent(2)"&gt;最新&lt;/button&gt;
&lt;/ons-segment&gt;

&lt;div id="content0"&gt;推荐内容&lt;/div&gt;
&lt;div id="content1" style="display: none;"&gt;热门内容&lt;/div&gt;
&lt;div id="content2" style="display: none;"&gt;最新内容&lt;/div&gt;

&lt;!-- JavaScript --&gt;
&lt;script&gt;
function showContent(index) {
    // 隐藏所有内容
    for (var i = 0; i &lt; 3; i++) {
        var content = document.getElementById('content' + i);
        if (content) {
            content.style.display = 'none';
        }
    }
    
    // 显示选中的内容
    var selectedContent = document.getElementById('content' + index);
    if (selectedContent) {
        selectedContent.style.display = 'block';
    }
    
    // 更新按钮状态
    var segment = document.getElementById('contentSegment');
    var buttons = segment.querySelectorAll('button');
    buttons.forEach(function(btn, i) {
        if (i === index) {
            btn.classList.add('active');
        } else {
            btn.classList.remove('active');
        }
    });
}
&lt;/script&gt;</code></pre>
            </div>
        </div>

        <h3 style="margin-top: 30px;">四个选项</h3>
        <div class="code-example-container">
            <div class="code-demo-area">
                <div style="margin: 10px 0;">
                    <ons-segment style="width: 100%;">
                        <button>全部</button>
                        <button>待付款</button>
                        <button>待发货</button>
                        <button>已完成</button>
                    </ons-segment>
                </div>
            </div>
            <div class="code-actions" onclick="toggleCode('four-options-code')">
                <div class="code-actions-left">
                    <ons-icon id="icon-four-options-code" icon="md-chevron-down"></ons-icon>
                    <span>查看代码</span>
                </div>
                <div class="code-actions-right">
                    <button class="code-action-btn" id="copy-btn-four-options-code" onclick="event.stopPropagation(); copyCode('four-options-code')">
                        <ons-icon icon="md-copy"></ons-icon>
                        <span class="btn-text">复制</span>
                    </button>
                </div>
            </div>
            <div class="code-display" id="code-four-options-code">
                <pre><code id="code-content-four-options-code">&lt;!-- HTML --&gt;
&lt;ons-segment style="width: 100%;"&gt;
    &lt;button&gt;全部&lt;/button&gt;
    &lt;button&gt;待付款&lt;/button&gt;
    &lt;button&gt;待发货&lt;/button&gt;
    &lt;button&gt;已完成&lt;/button&gt;
&lt;/ons-segment&gt;</code></pre>
            </div>
        </div>

        <h3 style="margin-top: 30px;">带图标的分段控件</h3>
        <div class="code-example-container">
            <div class="code-demo-area">
                <div style="margin: 10px 0;">
                    <ons-segment style="width: 100%;" id="iconSegment">
                        <button onclick="iconSegmentChanged(0)">
                            <ons-icon icon="md-home"></ons-icon>
                        </button>
                        <button onclick="iconSegmentChanged(1)">
                            <ons-icon icon="md-search"></ons-icon>
                        </button>
                        <button onclick="iconSegmentChanged(2)">
                            <ons-icon icon="md-favorite"></ons-icon>
                        </button>
                        <button onclick="iconSegmentChanged(3)">
                            <ons-icon icon="md-account-circle"></ons-icon>
                        </button>
                    </ons-segment>
                </div>
                <p style="margin-top: 10px; color: #666; text-align: center;" id="iconSegmentText">
                    当前: 首页
                </p>
            </div>
            <div class="code-actions" onclick="toggleCode('icon-segment-code')">
                <div class="code-actions-left">
                    <ons-icon id="icon-icon-segment-code" icon="md-chevron-down"></ons-icon>
                    <span>查看代码</span>
                </div>
                <div class="code-actions-right">
                    <button class="code-action-btn" id="copy-btn-icon-segment-code" onclick="event.stopPropagation(); copyCode('icon-segment-code')">
                        <ons-icon icon="md-copy"></ons-icon>
                        <span class="btn-text">复制</span>
                    </button>
                </div>
            </div>
            <div class="code-display" id="code-icon-segment-code">
                <pre><code id="code-content-icon-segment-code">&lt;!-- HTML --&gt;
&lt;ons-segment id="iconSegment"&gt;
    &lt;button onclick="iconSegmentChanged(0)"&gt;
        &lt;ons-icon icon="md-home"&gt;&lt;/ons-icon&gt;
    &lt;/button&gt;
    &lt;button onclick="iconSegmentChanged(1)"&gt;
        &lt;ons-icon icon="md-search"&gt;&lt;/ons-icon&gt;
    &lt;/button&gt;
    &lt;button onclick="iconSegmentChanged(2)"&gt;
        &lt;ons-icon icon="md-favorite"&gt;&lt;/ons-icon&gt;
    &lt;/button&gt;
    &lt;button onclick="iconSegmentChanged(3)"&gt;
        &lt;ons-icon icon="md-account-circle"&gt;&lt;/ons-icon&gt;
    &lt;/button&gt;
&lt;/ons-segment&gt;

&lt;!-- JavaScript --&gt;
&lt;script&gt;
function iconSegmentChanged(index) {
    var labels = ['首页', '搜索', '收藏', '我的'];
    document.getElementById('iconSegmentText').textContent = '当前: ' + labels[index];
    
    // 更新按钮状态
    var segment = document.getElementById('iconSegment');
    var buttons = segment.querySelectorAll('button');
    buttons.forEach(function(btn, i) {
        if (i === index) {
            btn.classList.add('active');
        } else {
            btn.classList.remove('active');
        }
    });
}
&lt;/script&gt;</code></pre>
            </div>
        </div>

        <h3 style="margin-top: 30px;">实际应用场景</h3>
        <div class="code-example-container">
            <div class="code-demo-area">
                <ons-card>
                    <div class="title">统计数据</div>
                    <div class="content">
                        <div style="margin: 10px 0;">
                            <ons-segment style="width: 100%;" id="statsSegment">
                                <button onclick="showStats(0)" class="active">今日</button>
                                <button onclick="showStats(1)">本周</button>
                                <button onclick="showStats(2)">本月</button>
                            </ons-segment>
                        </div>
                        <div style="text-align: center; padding: 30px 0;">
                            <div id="stats0">
                                <p style="font-size: 36px; font-weight: bold; color: #4a90e2; margin: 10px 0;">1,234</p>
                                <p style="color: #666;">今日访问量</p>
                            </div>
                            <div id="stats1" style="display: none;">
                                <p style="font-size: 36px; font-weight: bold; color: #50c878; margin: 10px 0;">8,567</p>
                                <p style="color: #666;">本周访问量</p>
                            </div>
                            <div id="stats2" style="display: none;">
                                <p style="font-size: 36px; font-weight: bold; color: #ff6b6b; margin: 10px 0;">35,890</p>
                                <p style="color: #666;">本月访问量</p>
                            </div>
                        </div>
                    </div>
                </ons-card>
            </div>
            <div class="code-actions" onclick="toggleCode('stats-segment-code')">
                <div class="code-actions-left">
                    <ons-icon id="icon-stats-segment-code" icon="md-chevron-down"></ons-icon>
                    <span>查看代码</span>
                </div>
                <div class="code-actions-right">
                    <button class="code-action-btn" id="copy-btn-stats-segment-code" onclick="event.stopPropagation(); copyCode('stats-segment-code')">
                        <ons-icon icon="md-copy"></ons-icon>
                        <span class="btn-text">复制</span>
                    </button>
                </div>
            </div>
            <div class="code-display" id="code-stats-segment-code">
                <pre><code id="code-content-stats-segment-code">&lt;!-- HTML --&gt;
&lt;ons-segment id="statsSegment"&gt;
    &lt;button onclick="showStats(0)" class="active"&gt;今日&lt;/button&gt;
    &lt;button onclick="showStats(1)"&gt;本周&lt;/button&gt;
    &lt;button onclick="showStats(2)"&gt;本月&lt;/button&gt;
&lt;/ons-segment&gt;

&lt;div id="stats0"&gt;
    &lt;p style="font-size: 36px; font-weight: bold; color: #4a90e2;"&gt;1,234&lt;/p&gt;
    &lt;p style="color: #666;"&gt;今日访问量&lt;/p&gt;
&lt;/div&gt;
&lt;div id="stats1" style="display: none;"&gt;
    &lt;p style="font-size: 36px; font-weight: bold; color: #50c878;"&gt;8,567&lt;/p&gt;
    &lt;p style="color: #666;"&gt;本周访问量&lt;/p&gt;
&lt;/div&gt;
&lt;div id="stats2" style="display: none;"&gt;
    &lt;p style="font-size: 36px; font-weight: bold; color: #ff6b6b;"&gt;35,890&lt;/p&gt;
    &lt;p style="color: #666;"&gt;本月访问量&lt;/p&gt;
&lt;/div&gt;

&lt;!-- JavaScript --&gt;
&lt;script&gt;
function showStats(index) {
    // 隐藏所有统计
    for (var i = 0; i &lt; 3; i++) {
        var stats = document.getElementById('stats' + i);
        if (stats) {
            stats.style.display = 'none';
        }
    }
    
    // 显示选中的统计
    var selectedStats = document.getElementById('stats' + index);
    if (selectedStats) {
        selectedStats.style.display = 'block';
    }
    
    // 更新按钮状态
    var segment = document.getElementById('statsSegment');
    var buttons = segment.querySelectorAll('button');
    buttons.forEach(function(btn, i) {
        if (i === index) {
            btn.classList.add('active');
        } else {
            btn.classList.remove('active');
        }
    });
}
&lt;/script&gt;</code></pre>
            </div>
        </div>

        <div style="margin-top: 30px; padding: 20px; background-color: #f5f5f5; border-radius: 8px;">
            <h4>使用建议</h4>
            <ul style="color: #666; line-height: 1.8; margin: 10px 0; padding-left: 20px;">
                <li>选项数量建议 2-4 个</li>
                <li>文字简洁明了</li>
                <li>可以使用图标增强识别度</li>
                <li>适合用于视图切换和筛选</li>
            </ul>
        </div>
    </div>

    <script>
        function segmentChanged(segmentId, index) {
            var options = ['选项 1', '选项 2', '选项 3'];
            var textElement = document.getElementById(segmentId + 'Text');
            if (textElement) {
                textElement.textContent = '当前选择: ' + options[index];
            }
            
            // 更新按钮状态
            var segment = document.getElementById(segmentId);
            var buttons = segment.querySelectorAll('button');
            buttons.forEach(function(btn, i) {
                if (i === index) {
                    btn.classList.add('active');
                } else {
                    btn.classList.remove('active');
                }
            });
        }

        function showContent(index) {
            // 隐藏所有内容
            for (var i = 0; i < 3; i++) {
                var content = document.getElementById('content' + i);
                if (content) {
                    content.style.display = 'none';
                }
            }
            
            // 显示选中的内容
            var selectedContent = document.getElementById('content' + index);
            if (selectedContent) {
                selectedContent.style.display = 'block';
            }
            
            // 更新按钮状态
            var segment = document.getElementById('contentSegment');
            var buttons = segment.querySelectorAll('button');
            buttons.forEach(function(btn, i) {
                if (i === index) {
                    btn.classList.add('active');
                } else {
                    btn.classList.remove('active');
                }
            });
        }

        function iconSegmentChanged(index) {
            var labels = ['首页', '搜索', '收藏', '我的'];
            document.getElementById('iconSegmentText').textContent = '当前: ' + labels[index];
            
            // 更新按钮状态
            var segment = document.getElementById('iconSegment');
            var buttons = segment.querySelectorAll('button');
            buttons.forEach(function(btn, i) {
                if (i === index) {
                    btn.classList.add('active');
                } else {
                    btn.classList.remove('active');
                }
            });
        }

        function showStats(index) {
            // 隐藏所有统计
            for (var i = 0; i < 3; i++) {
                var stats = document.getElementById('stats' + i);
                if (stats) {
                    stats.style.display = 'none';
                }
            }
            
            // 显示选中的统计
            var selectedStats = document.getElementById('stats' + index);
            if (selectedStats) {
                selectedStats.style.display = 'block';
            }
            
            // 更新按钮状态
            var segment = document.getElementById('statsSegment');
            var buttons = segment.querySelectorAll('button');
            buttons.forEach(function(btn, i) {
                if (i === index) {
                    btn.classList.add('active');
                } else {
                    btn.classList.remove('active');
                }
            });
        }
    </script>
    <script src="../js/code-display.js"></script>
</ons-page>
